<!-- 我的页面 -->
<template>
	<view>
		<view class="overall ">
			<!-- 个人信息 start -->
			<view class="Information">
				<view class="my-Information">
					<image src="../../static/mine-icon/user.png" class="my-icon"></image>
					<view class="Information-name">
						<text>Hi~{{name}}</text>
						<text>{{phone}}</text>
					</view>
					<image src="../../static/mine-icon/gd.png" class="move"></image>
				</view>
				<view class="balance">
					<view class="balance-my">
						<view>
							余额宝账户
						</view>
						<image src="../../static/mine-icon/gd.png" class="move"></image>
					</view>
					<view class="balance-my">
						<view>
							我的资产
						</view>
						<image src="../../static/mine-icon/gd.png" class="move"></image>
					</view>
				</view>
			</view>
			<!-- 个人信息 end -->
			<!-- 导航条部分  start -->
			<view class="nav">
				<view class="nav-dl">
					<image src="../../static/mine-icon/yeb_uicon01.png" mode=""></image>
					<text>充值</text>
				</view>
				<view class="nav-dl">
					<image src="../../static/mine-icon/yeb_uicon02.png" mode=""></image>
					<text>提现</text>
				</view>
				<view class="nav-dl">
					<image src="../../static/mine-icon/yeb_uicon03.png" mode=""></image>
					<text>资金账户</text>
				</view>
				<view class="nav-dl">
					<image src="../../static/mine-icon/yeb_uicon04.png" mode=""></image>
					<text>新手指引</text>
				</view>
			</view>
			<!-- 导航条部分  end -->
			<view class="hr"></view>
			<!-- 菜单部分 start -->
			<view class="menu">
				<view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon01.png" mode=""></image>
					<text>实名认证</text>
				</view>
				<view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon02.png" mode=""></image>
					<text>在线客服</text>
				</view>
				<!-- <view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon03.png" mode=""></image>
					<text>历史查询</text>
				</view> -->
				<!-- <view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon04.png" mode=""></image>
					<text @click="publicize">推广赚钱</text>
				</view> -->
				<view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon05.png" mode=""></image>
					<text>新手指引</text>
				</view>
				<!-- <view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon06.png" mode=""></image>
					<text>平台公告</text>
				</view> -->
				<view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon07.png" mode=""></image>
					<text>关于我们</text>
				</view>
				<!-- <view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon08.png" mode=""></image>
					<text>联系我们</text>
				</view> -->
				<view class="small-menu">
					<image src="../../static/mine-icon/yeb_cicon09.png" mode=""></image>
					<text>修改密码</text>
				</view>
			</view>
			<!-- 菜单部分 end -->
			<view class="hr"></view>
			<!-- 退出登录 start-->
			<view class="exit-login" @click="exit_login">
				退出登录
			</view>
			<!-- 退出登录 end-->
			<view class="hr"></view>
			<view class="white"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				name:'',
				phone:''
			}
		},
		methods: {
			publicize(){
				uni.navigateTo({
					url:"/pages/publicize/publicize"
				})
			},
			//用户点击退出登录执行该事件
			exit_login(){
				let that =this
				uni.showModal({
					title: '是否退出登录？',
					confirmText:'退出登录',
					cancelText:'取消',
					success: function (res) {
						if (res.confirm) {
							that.request();
						} else if (res.cancel) {
							
						}
					}
				});
			},
			//退出登录
			request(){
				let requset ='http://7c690b2e.r9.cpolar.top';
				let token =uni.getStorageSync('token')
				uni.request({
					url:requset+"/api/user/logout",
					method:'POST',
					header:{
						'token':token
					},
					success(res) {
						uni.removeStorageSync('token');
						uni.removeStorageSync('id');
						uni.removeStorageSync('name');
						uni.removeStorageSync('phone');
						uni.switchTab({
							url:"/pages/index/index"
						})
					}
				})
			}
		},
		//页面启动判断token是否存在
		onShow() {
			let token =uni.getStorageSync('token');
			let name =uni.getStorageSync('name');
			let phone =uni.getStorageSync('phone');
			if(token){
				uni.switchTab({
					url:"/pages/mine/mine"
				})
				this.name =name;
				this.phone =phone;
			}else{
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>
<style>
.overall {
	width: 100%;
	background: url("../../static/mine-icon/money_bg1.png") no-repeat;
	background-size: 100% 8.5rem;
	overflow: hidden;
}
.hr{
	width: 100%;
	height: 0.625rem;
	background-color: rgb(242, 242, 242);
}
.white{
	width: 100%;
	height: 0.625rem;
	background-color: white;
}
/* 个人信息样式 start */
.Information{
	width: 93.6%;
	height: 11.5625rem;
	margin: 0rem auto;
	margin-top: 3.2rem;
	background-color: aliceblue;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 5px 2px #ddd;
}
.my-Information{
	width: 100%;
	height: 5.2875rem;
	background-color: rgb(251, 187, 190);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}
.my-icon{
	width: 3.4375rem;
	height: 3.4375rem;
	margin-left: 0.9375rem;
	margin-right: 0.9375rem;
	border-radius: 0.3rem;
}
.Information-name{
	height: 3rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-between;
}
.Information-name text:nth-child(1){
	font-size: 0.9rem;
	color: #212121;
	font-weight: 500;
}
.Information-name text:nth-child(2){
	font-size: 0.6rem;
	color: #757575;
	margin-bottom: 0.5rem;
}
.move{
	width: 1rem;
	height: 1rem;
	margin-right: 0.68rem;
}
.balance{
	width: 100%;
	height: 6.25rem;
	background-color: rgb(255, 255, 255);
	border-bottom-right-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}
.balance-my{
	width: 100%;
	height: 3.125rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 1rem;
}
.balance-my view:nth-child(1){
	margin-left: 0.9375rem;
}
/* 个人信息样式 end */
/* 导航部分样式 start */
.nav{
	width: 93.6%;
	height: 6.25rem;
	margin: 0rem auto;
	margin-top: 0.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.nav-dl{
	width: 5.4375rem;
	height: 100%;
	color: #212121;
	font-size: 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0rem;
	box-sizing: border-box;
}
.nav-dl image{
	width: 2.75rem;
	height: 2.75rem;
}
.nav-dl text{
	margin-bottom: .5rem;
}
/* 导航部分样式 end */
/* 菜单部分样式 start */
.menu{
	width: 100%;
	height: 18.875rem;
	margin: 0rem auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
.small-menu{
	width: 50%;
	height: 3.78125rem;
	background-color: white;
	display: flex;
	align-items: center;
}
.menu .small-menu:nth-child(2n-1){
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.menu .small-menu:nth-child(2n){
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.small-menu image{
	width: 1.906rem;
	height: 1.906rem;
	margin-left: 0.9375rem;
	margin-right: 0.625rem;
}
.small-menu text{
	margin-bottom: 0.6rem;
	color: #212121;
	font-size: .9rem;
}
/* 菜单部分样式 end */
/* 退出登录 start */
.exit-login{
	width: 100%;
	height: 2.75rem;
	color: #03a9f4 !important;
	font-size: 1rem;
	text-align: center;
	line-height: 2.75rem;
}
/* 退出登录 end */
</style>
